import 'vux/src/styles/reset.less';
import './buy_member.scss'
import { Swiper, Scroller, Tab, TabItem, Sticky, Flexbox, FlexboxItem, ViewBox, Group, Cell, XButton, ToastPlugin, TransferDomDirective as TransferDom, ConfirmPlugin } from 'vux'

Vue.use(ToastPlugin)
Vue.use(ConfirmPlugin)

import utils from 'js/utils.js'

import { hostImg } from 'js/host-config'
import { fetch, rap } from 'js/fetch.js'
import { cookie } from 'vux'

let url = {
  getVip: 'api/vips',
  postDeposit:'api/user/deposit'
  //slideList: '/slide/listSlides.do'
}
url = rap(url)
import Myhead from 'components/head/head.vue'
// import Slide from 'components/slide/slide.vue'
import Top from 'components/top/top.vue'
// import Search from 'components/search/search.vue'
import Foot from 'components/foot/foot.vue'
import Mybuy from 'components/buy/buy.vue'

import mixin from 'js/mixin.js'

new Vue({
  el: '#body',
  data: {
    vipList: [],
    listIndex: 0,
    transitionName: 'slide-left',
    token: '',
    isExpired:0,
    deposit:0
  },
  created() {
    this.isLogin = utils.isLogin()
    //没有登录去登录
    if (!this.isLogin) {
      window.location.href = './login.html'
    } else {
      this.token = cookie.get('token')
      this.getVip()
      this.isExpired= window.localStorage.getItem('isExpired')
      this.deposit=Number(window.localStorage.getItem('deposit'))
      console.log('deposit:'+this.deposit)
      console.log('Expired:'+this.isExpired)
      
    }
  },
  methods: {
    pay(){
      //支付押金
      fetch('post', `${url.postDeposit}`, {}, { 'headers': this.token }).then(res => {
        if (res.status >= 200 && res.status <= 300) {
          //console.log(res.data)
          let json=JSON.parse(res.data.config)
          console.log(json)
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',json,
            function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    // res.err_msg将在用户支付成功后返回
                    // ok，但并不保证它绝对可靠。
                    alert('支付成功')
                    window.location.href = './member.html'
                }
            }
        );


        } else {
          this.$vux.toast.show({
            text: res.data.message,
            type: 'warn',
            onShow() {
              //console.log('Plugin: I\'m showing')
            },
            onHide() {
              //console.log('Plugin: I\'m hiding')
            }
          })
        }
      })
    },
    buyMember(id) {
      let _this = this

      //检查是否交了押金
      if ((Number(window.localStorage.getItem('deposit'))) <= 0) {
        
        //console.log(window.localStorage.getItem('deposit'))
        //console.log(Number(window.localStorage.getItem('deposit')))
        this.$vux.confirm.show({
          title: '请先交纳押金',
          content: '您没有交纳押金,点击确定交纳',
          onShow() {
            console.log('plugin show')
          },
          onHide() {
            console.log('plugin hide')
          },
          onCancel() {
            console.log('plugin cancel')
          },
          onConfirm() {
            //支付购买会员
            fetch('post', `${url.getVip}/${id}/buy`, {}, { 'headers': _this.token }).then(res => {
              if (res.status >= 200 && res.status <= 300) {
                //console.log(res.data)
                let json = JSON.parse(res.data.config)
                //console.log(json)
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', json,
                  function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      // res.err_msg将在用户支付成功后返回
                      // ok，但并不保证它绝对可靠。
                      window.location.href = './member.html'
                    }
                  }
                );

                // this.$vux.toast.show({
                //   text: '购买成功',
                //   type: 'success',
                //   onShow() {
                //     //console.log('Plugin: I\'m showing')
                //   },
                //   onHide() {
                //     window.location.href = './member.html'
                //     //console.log('Plugin: I\'m hiding')
                //   }
                // })
              } else {
                // this.$vux.toast.show({
                //   text: res.data.message,
                //   type: 'warn',
                //   onShow() {
                //     //console.log('Plugin: I\'m showing')
                //   },
                //   onHide() {
                //     //console.log('Plugin: I\'m hiding')
                //   }
                // })
              }
            })
          }
        })

        return
      }


      this.$vux.confirm.show({
        title: '确定购买吗？',
        content: '确定购买并同意xxx协议',
        onShow() {
          console.log('plugin show')
        },
        onHide() {
          console.log('plugin hide')
        },
        onCancel() {
          console.log('plugin cancel')
        },
        onConfirm() {

          //支付购买会员
          fetch('post', `${url.getVip}/${id}/buy`, {}, { 'headers': _this.token }).then(res => {
            if (res.status >= 200 && res.status <= 300) {
              //console.log(res.data)
              let json = JSON.parse(res.data.config)
              //console.log(json)
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', json,
                function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    // res.err_msg将在用户支付成功后返回
                    // ok，但并不保证它绝对可靠。
                    window.location.href = './member.html'
                  }
                }
              );

              // this.$vux.toast.show({
              //   text: '购买成功',
              //   type: 'success',
              //   onShow() {
              //     //console.log('Plugin: I\'m showing')
              //   },
              //   onHide() {
              //     window.location.href = './member.html'
              //     //console.log('Plugin: I\'m hiding')
              //   }
              // })
            } else {
              // this.$vux.toast.show({
              //   text: res.data.message,
              //   type: 'warn',
              //   onShow() {
              //     //console.log('Plugin: I\'m showing')
              //   },
              //   onHide() {
              //     //console.log('Plugin: I\'m hiding')
              //   }
              // })
            }
          })
        }
      })
    },
    getVip() {
      //获取会员套餐
      fetch('get', `${url.getVip}`, {}, { 'headers': this.token }).then(res => {
        if (res.status >= 200 && res.status <= 300) {
          console.log(res.data)
          //mock
          //http://www.5chelib.com/storage/vip/SBmF7SsFvtSUHWVsuIjwxLcLDtnejYGajqwtH9I1.jpeg
          // res.data = [
          //   {
          //     "id": 1,// id套餐
          //     "name": "超级会员1",//套餐名称
          //     "icon": "vip/SBmF7SsFvtSUHWVsuIjwxLcLDtnejYGajqwtH9I1.jpeg",//套餐图标
          //     "price": "2000.00",//价格
          //     "day": 0,//天数
          //     "type": 2// 1 有期限需要显示天数，2 无期限 比如超级会员
          //   }, {
          //     "id": 2,// id套餐
          //     "name": "超级会员2",//套餐名称
          //     "icon": "vip/SBmF7SsFvtSUHWVsuIjwxLcLDtnejYGajqwtH9I1.jpeg",//套餐图标
          //     "price": "2000.00",//价格
          //     "day": 10,//天数
          //     "type": 1// 1 有期限需要显示天数，2 无期限 比如超级会员
          //   }
          // ]

          res.data.forEach(element => {
            let obj = {
              id: element.id,
              name: element.name,
              icon: `${hostImg}${element.icon}`,
              price: element.price,
              day: element.day,
              type: element.type,
              desc: element.desc,
            }
            this.vipList.push(obj)
          });

        } else {
          this.$vux.toast.show({
            text: res.data.message,
            type: 'warn',
            onShow() {
              //console.log('Plugin: I\'m showing')
            },
            onHide() {
              //console.log('Plugin: I\'m hiding')
            }
          })
        }
      })
    },
    show(index) {
      if (this.listIndex > index) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      this.listIndex = index
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Cell,
    Group,
    Swiper,
    Scroller,
    Tab,
    TabItem,
    Sticky,
    Flexbox,
    FlexboxItem,
    ViewBox,
    XButton,
    Mybuy
  },
  mixins: [mixin]
})
